<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝网 - 淘！ 呸！！！</title>
	<link rel="stylesheet" href="css.css">
</head>
<body>
    <div class="wrapper">
        <div class="nav-wra">
            <div class="nav-wra1">
              <ul class="top-nav-1">
                 <li>
                    <a href="#" class="login">亲，请登录</a>
                    <a href="#" class="reg">免费注册</a>
                 </li>
                 <li>
                    <a href="#" class="phone">手机逛淘宝</a>
                 </li>
              </ul>
              <ul class="top-nav-2">
           	     <li class="myTaobao">
                    <a href="#">我的淘宝</a>
                    <span class="bg xsj"></span>
           	     </li>
           	     <li class="shopCar">
                    <a href="#">
                      <span class="shopBg"></span>
                      <span>购物车</span>                      
                    </a>
                    <span class="bg xsj"></span>
           	     </li>
           	     <li class="collect">
                    <a href="#">
                        <span class="collectPic"></span>
                        <span>收藏夹</span>
                    </a>
                    <span class="bg xsj"></span>
           	     </li>
           	     <li class="goods">
                    <a href="#">商品分类</a>
           	     </li>
           	     <li class="cut">
                    <span>丨</span>
           	     </li>
           	     <li class="seller">
                    <a href="#">卖家中心</a>
                    <span class="bg xsj"></span>
           	     </li>
           	     <li class="kefu">
                    <a href="#">联系客服</a>
                    <span class="bg xsj"></span>
           	     </li>
           	     <li class="gps">
                    <a href="#">
                       <span class="gpsPic"></span>
                       <span>网站导航</span>                       
                    </a>
                    <span class="bg xsj"></span>
           	     </li>
               </ul>
            </div>
        </div>
       
        <!-- 导航结束 -->

        <div class="search">
              <div class="search-con">
                  <div class="logo">
                      <img src="images/logo.png" alt="">
                  </div>
                  <div class="baby">
                      <div class="baby-con">
                          <div class="search-top">
                            <ul>
                            	<li class="active">宝贝</li>
                            	<li>天猫</li>
                            	<li>店铺</li>
                            </ul>
                          </div>
                          <div class="search-tab">
                             <div class="input-wrap">
                             	<i class="fdj"></i>
                                <form action="">
                                	<div class="search-int-box">
                                		<div class="search-int">
                                            <input type="text" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机防辐射贴">
                                		</div>
                                	</div>
                                	<div class="btn">
                                       <button>搜索</button>
                                	</div>
                                </form>
                                <a href="#" class="camera"></a>
                             </div>
                             <div class="button"></div>
                          </div>
                      </div>
                      <div class="search-ft">
                          <ul>
                          	<li>新款连衣裙</li>
                          	<li>毛绒熊</li>
                          	<li class="Cltx">潮流T恤</li>
                          	<li>时尚女鞋</li>
                          	<li>短裤</li>
                          	<li>篮球</li>
                          	<li>男士外套</li>
                          	<li>墙纸</li>
                          	<li>运动鞋</li>
                          	<li>新款男鞋</li>
                          	<li>耳机</li>
                          </ul>
                      </div>
                  </div>
                  <div class="code">
                     <a href="#">
                     	<span>手机淘宝</span>
                        <img class="qrcode">
                     </a>
                     <a href="#" class="close">X</a>
                  </div>
              </div>
        </div>

      
        <!-- logo 搜索框 二维码结束 -->

        <div class="clearfix">
            <h2>主题市场</h2>
            <ul class="service">
            	<li>天猫</li>
            	<li>聚划算</li>
            	<li>天猫超市</li>
            </ul>
            <ul>
            	<li><a href="">丨</a></li>
            	<li><a href="">淘抢购</a></li>
            	<li><a href="">电器城</a></li>
            	<li><a href="">私发拍卖</a></li>
            	<li><a href="">中国质造</a></li>
            	<li><a href="">兴农扶贫</a></li>
            </ul>
            <ul>
            	<li><a href="">丨</a></li>
            	<li><a href="">飞猪旅行</a></li>
            	<li><a href="">智能生活</a></li>
            	<li><a href="">苏宁易购</a></li>
            </ul>
        </div>

     <!-- 中导结束 -->


     <div class="screen">
          <div class="main">
              <div class="main-inner">
                 <div class="modu">
                    <ul>
                    	<li class="lis">
                    		<a href="#">女装</a>/
                    		<a href="#">男装</a>/
                    		<a href="#">内衣</a>
                    		<i class="font"></i>
                    	</li>
                    	<li class="lis">
                    		<a href="#">鞋靴</a>/
                    		<a href="#">箱包</a>/
                    		<a href="#">配件</a>
                    		<i class="font"></i>
                    	</li>
                    	<li class="lis">
                    		<a href="#">童装玩具</a>/
                    		<a href="#">孕产</a>/
                    		<a href="#">用品</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="#">家电</a>/
                    		<a href="#">数码</a>/
                    		<a href="#">手机</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="#">美妆</a>/
                    		<a href="#">洗护</a>/
                    		<a href="#">保健品</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="#">珠宝</a>/
                    		<a href="#">眼镜</a>/
                    		<a href="#">手表</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="#">运动</a>/
                    		<a href="#">户外</a>/
                    		<a href="#">乐器</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="#">游戏</a>/
                    		<a href="#">动漫</a>/
                    		<a href="#">影视</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="#">美食</a>/
                    		<a href="#">生鲜</a>/
                    		<a href="#">零食</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="#">鲜花</a>/
                    		<a href="#">宠物</a>/
                    		<a href="#">农资</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="">房产</a>/
                    		<a href="">装修</a>/
                    		<a href="">建材</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="">家居</a>/
                    		<a href="">家饰</a>/
                    		<a href="">家纺</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="">汽车</a>/
                    		<a href="">二手车</a>/
                    		<a href="">自行车</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="">办公</a>/
                    		<a href="">DIY</a>/
                    		<a href="">五金电子</a>
                    		<i class="font"></i>
                    	</li>
                    	<li>
                    		<a href="">百货</a>/
                    		<a href="">餐厨</a>/
                    		<a href="">家庭保健</a>
                    	</li>
                    	<li>
                    		<a href="">学习</a>/
                    		<a href="">卡卷</a>/
                    		<a href="">本地服务</a>
                    	</li>
                    </ul>
                 </div>
                 <div class="core">
                 	 <div class="chart">
                        <ul class="chartpic">
                        	<li>
                                <img src="images/11.jpg" alt="">
                        	</li>
                        	<li>
                                <img src="images/img1.jpg" alt="">
                        	</li>
                        	<li>
                                <img src="images/img2.jpg" alt="">
                        	</li>
                        	<li>
                                <img src="images/img3.jpg" alt="">
                        	</li>
                        	<li>
                                <img src="images/img4.jpg" alt="">
                        	</li>
                        	<li>
                                <img src="images/11.jpg" alt="">
                        	</li>
                        </ul>
                        <div class="btn leftBtn">&lt;</div>
                        <div class="btn rightBtn">&gt;</div>
                        <div class="list">
                            <ul>
                            	<li class="list-li"></li>
                            	<li></li>
                            	<li></li>
                            	<li></li>
                            	<li></li>
                            </ul>
                        </div>
                 	 </div>
                 	 <div class="tmall">
                          <div class="tmall-hd">
                          	 <span class="hd-bg"></span>
                          	 <span class="Tianmao">理想生活上天猫</span>                          
                          </div>
                          <div class="tmallpic">                              
                             
                               <a href=""><img src="images/pic3.png" alt=""></a>

                          </div>
                 	 </div>
                 </div>
                 <div class="promo">
                 	<div class="column">
                       <a href="#"><img src="images/3.jpg" alt=""></a>
                 	</div>
                 	<div class="tanx">
                        <h5>今日热卖</h5>
                        <div class="tanx-con">
                          <a href="#"><img src="images/5.jpg" alt=""></a>
                        </div>
                 	</div>
                 </div>
              </div>
              <div class="main-headline">
                 <div class="main-headline-con">
                    <h3 class="headline-hd">
                     <p>
                    	<span class="subtitle">让你的生活更有趣</span>
                    </p>
                    </h3>
                    <a class="more" href="#">更多></a>
                    <div class="headline-bd">
                       <a href="#">
                          <img src="images/7.gif" alt="">
                          <h4>东道主OUT，快下天台，上淘宝瓜分2亿</h4>
                          <p>北京时间7月7日晚间10点，2018世界杯1/4决赛迎来了第三场比赛，英格兰和瑞典在萨马拉展开对决。凭借着马圭尔和阿里两人的头球破门英格兰战胜了瑞典，这也是时隔28年之久后三狮军团再次进入世界杯4强。</p>
                       </a>
                    </div>
                 </div>
              </div>
          </div>
          <div class="col-right">
              <div class="member">
                    <div class="member-bd">
                          <div class="avatar">
                                  <a href="#">
                                        <img src="images/9.jpg" alt="">
                                  </a>
                          </div>
                          <span>
                              <i>Hi!你好</i>
                          </span>
                          <p class="member-tjb">
                             <a class="h" href="#">
                                <span class="tbh-icon"></span>领淘金币抵钱
                             </a>
                             <a class="h club" href="#">
                                <span class="tbh-icon"></span>会员俱乐部
                             </a>
                          </p>
                    </div>
                    <div class="member-ft">
 
                      <ul class="member-dl">
                      	  <li>登录</li>
                      	  <li>注册</li>
                      	  <li>开店</li>
                      </ul>

                    </div>
              </div>
              <div class="tbh-tipoff">
                 <a href="#">
                    网上有害信息举报专区<span></span>
                 </a>
              </div>
              <div class="notice">
                 <ul class="notice-li">
                   <li>公告</li>
                   <li>规则</li>
                   <li>论坛</li>
                   <li>安全</li>
                   <li>公益</li>
                 </ul>
                 <div class="notice-bd">
                     <a href=""><span style="color:#f40;">售假获刑又起诉！</span></a>
                     <a href=""><span style="color:#f40;">运营神器年中大促!</span></a>
                     <a href=""><span>项目入驻公益宝贝</span></a>
                     <a href=""><span>天猫新零售成标配</span></a>
                 </div>
              </div>
              <div class="conve">
                   <ul class="conve-list">
                     <li>
                        <a href="#">
                              <span></span>
                              <p>充话费</p>
                        </a>
                     </li>
                     <li class="con-2">
                        <a href="#">
                              <span></span>
                              <p>旅行</p>
                        </a>
                     </li>
                     <li class="con-3">
                        <a href="#">
                              <span></span>
                              <p>车险</p>
                        </a>
                     </li>
                     <li class="con-4">
                        <a href="#">
                              <span></span>
                              <p>游戏</p>
                        </a>
                     </li>
                     <li class="con-5">
                        <a href="#">
                              <span></span>
                              <p>彩票</p>
                        </a>
                     </li>
                     <li class="con-6">
                        <a href="#">
                              <span></span>
                              <p>电影</p>
                        </a>
                     </li>
                     <li class="con-7">
                        <a href="#">
                              <span></span>
                              <p>酒店</p>
                        </a>
                     </li>
                     <li class="con-8">
                        <a href="#">
                              <span></span>
                              <p>理财</p>
                        </a>
                     </li>
                     <li class="con-9">
                        <a href="#">
                              <span></span>
                              <p>找服务</p>
                        </a>
                     </li>
                     <li class="con-10">
                        <a href="#">
                              <span></span>
                              <p>演出</p>
                        </a>
                     </li>
                     <li class="con-11">
                        <a href="#">
                              <span></span>
                              <p>水电煤</p>
                        </a>
                     </li>
                     <li class="con-12">
                        <a href="#">
                              <span></span>
                              <p>火车票</p>
                        </a>
                     </li>
                   </ul>
              </div>
              <div class="apps">
                   <h3>阿里APP<a href="">更多></a></h3>
                   <ul class="apps-li">
                     <li>
                         <a href=""><img src="images/smalllogo1.png" alt=""></a>
                     </li>
                     <li>
                         <a href=""><img src="images/smalllogo2.png" alt=""></a>
                     </li>
                     <li>
                         <a href=""><img src="images/smalllogo3.png" alt=""></a>
                     </li>
                     <li>
                         <a href=""><img src="images/smalllogo4.png" alt=""></a>
                     </li>
                     <li>
                         <a href=""><img src="images/smalllogo5.png" alt=""></a>
                     </li>
                     <li>
                         <a href=""><img src="images/smalllogo6.png" alt=""></a>
                     </li>
                     <li>
                         <a href=""><img src="images/smalllogo7.png" alt=""></a>
                     </li>
                     <li>
                         <a href=""><img src="images/smalllogo8.png" alt=""></a>
                     </li>
                     <li>
                         <a href=""><img src="images/smalllogo9.png" alt=""></a>
                     </li>
                     <li>
                         <a href=""><img src="images/smalllogo10.png" alt=""></a>
                     </li>
                   </ul>
              </div>
          </div>
     </div>
    </div>


    <script src='move.js'></script>


    <!-- 轮播图JS动画 -->
     <script>
         var timer = null;
         var slider = document.getElementsByClassName('chartpic')[0];
         var moveWidth = slider.children[0].offsetWidth;
         var num = slider.children.length - 1;
         var leftBtn = document.getElementsByClassName('leftBtn')[0];
         var rightBtn = document.getElementsByClassName('rightBtn')[0];
         var li = document.getElementsByClassName('list')[0].getElementsByTagName('li');
         var lock = true;
         var index = 0;


         leftBtn.onclick = function () {
         	autoMove('right->left');
         }

         rightBtn.onclick = function () {
            autoMove('left->right');
         }

             

         for(var i = 0; i < li.length; i ++){
         	(function(myIndex){
         		li[i].onclick = function () {
         			lock = false;
         			clearTimeout(timer);
         			index = myIndex;
         			startMove(slider, {left: -index * moveWidth}, function(){
                       lock = true;
                       timer = setTimeout(autoMove, 3500);
                       changeIndex(index);
         			})
         		}
         	})(i)
         }


         //direction
         //默认轮播方向/right按钮  'left->right' / undefined
         //点击left按钮   'right->left'

         function autoMove (direction) {
            if(lock){
            	lock = false;
            	clearTimeout(timer);
               if (!direction || direction == 'left->right') {
               	   index ++;
             	   startMove(slider, {left: slider.offsetLeft - moveWidth}, function(){
                      if(slider.offsetLeft == - num * moveWidth){
                      	index = 0;
                      	slider.style.left = '0px';
                      }
                      timer = setTimeout(autoMove, 3500);
                      lock = true;
                      changeIndex(index);
             	   });
               }else if (direction == 'right->left') {
             	  if (slider.offsetLeft == 0){
             	  	  slider.style.left = -num * moveWidth + 'px';
             	  	  index = num;
             	  }
             	  index --;
             	  startMove(slider, {left: slider.offsetLeft + moveWidth}, function () {
                     timer = setTimeout(autoMove, 3500);
                     lock = true;
                     changeIndex(index);
             	  })
              }
           }
        }


        function changeIndex (_index) {
            for(i = 0; i < li.length; i ++){
            	 li[i].className = '';
            }
            	 li[_index].className = 'list-li';
            
        }


         timer = setTimeout(autoMove, 3500);
     </script>
</body>
</html>